import type { RouteObject } from 'react-router';

import { varAlpha } from 'minimal-shared/utils';
import { lazy, Suspense } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import Box from '@mui/material/Box';
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';

import { AuthLayout } from 'src/layouts/auth';
import { DashboardLayout } from 'src/layouts/dashboard';
import CandidatePage from 'src/pages/candidate/candidate';
import CompanyPage from 'src/pages/company/company';
import CompanyAddPage from 'src/sections/company/add/company-add';

// ----------------------------------------------------------------------

export const DashboardPage = lazy(() => import('src/pages/dashboard'));
export const BlogPage = lazy(() => import('src/pages/blog'));
export const UserPage = lazy(() => import('src/pages/user'));
export const SignInPage = lazy(() => import('src/pages/sign-in'));
export const ProductsPage = lazy(() => import('src/pages/products'));
export const Page404 = lazy(() => import('src/pages/page-not-found'));
export const MenuLevel2Page = lazy(() => import('src/pages/menu-level-2'));
export const MenuLevel3Page = lazy(() => import('src/pages/menu-level-3'));

/**
 * 渲染 Suspense 的占位内容，在页面中心显示进度条。
 * 用于懒加载页面的加载状态提示。
 */
const renderFallback = () => (
  <Box
    sx={{
      display: 'flex',
      flex: '1 1 auto',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <LinearProgress
      sx={{
        width: 1,
        maxWidth: 320,
        bgcolor: (theme) => varAlpha(theme.vars.palette.text.primaryChannel, 0.16),
        [`& .${linearProgressClasses.bar}`]: { bgcolor: 'text.primary' },
      }}
    />
  </Box>
);

export const routesSection: RouteObject[] = [
  {
    element: (
      <DashboardLayout>
        <Suspense fallback={renderFallback()}>
          <Outlet />
        </Suspense>
      </DashboardLayout>
    ),
    children: [
      // 根路径访问时默认跳转到 /home
      { path: '/', element: <Navigate to="/home" replace /> },
      { index: true, path: 'home', element: <DashboardPage /> },
      { path: 'candidate', element: <CandidatePage /> },
      { path: 'company', element: <CompanyPage /> },
      { path: 'company/add', element: <CompanyAddPage /> },
      { path: 'blog', element: <BlogPage /> },
      // 多级菜单示例路由
      { path: 'nested/level-2', element: <MenuLevel2Page /> },
      { path: 'nested/level-2/level-3', element: <MenuLevel3Page /> },
    ],
  },
  {
    index: true,
    path: 'sign-in',
    element: (
      <AuthLayout>
        <SignInPage />
      </AuthLayout>
    ),
  },
  {
    path: '404',
    element: <Page404 />,
  },
  { path: '*', element: <Page404 /> },
];
